<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新 增
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16"></el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
      ></app-table>
    </div>
    <el-dialog
      title="养老机构"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="机构名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="机构法人" prop="person">
                <el-input v-model="ruleForm.person"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="ruleForm.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="机构性质" prop="cart">
                <el-select
                  v-model="ruleForm.cart"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="民办" :value="1"></el-option>
                  <el-option :key="1" label="公办" :value="2"></el-option>
                  <el-option :key="2" label="民办公助" :value="3"></el-option>
                  <el-option :key="3" label="公建民营" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="机构类型" prop="type">
                <el-select
                  v-model="ruleForm.type"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="专业机构" :value="1"></el-option>
                  <el-option :key="1" label="医养结合" :value="2"></el-option>
                  <el-option :key="2" label="特色护理" :value="3"></el-option>
                  <el-option :key="3" label="旅居养老" :value="4"></el-option>
                  <el-option
                    :key="4"
                    label="社区照料中心"
                    :value="5"
                  ></el-option>
                  <el-option :key="5" label="康养小镇" :value="6"></el-option>
                  <el-option :key="6" label="候鸟养老" :value="7"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="医保资格" prop="medical">
                <el-select
                  v-model="ruleForm.medical"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="是" :value="1"></el-option>
                  <el-option :key="1" label="否" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="成立时间" prop="build_time">
                <el-date-picker
                  v-model="ruleForm.build_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="查询开始"
                  size="medium"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="床位总数" prop="bed_num">
                <el-input v-model="ruleForm.bed_num"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="所在地" prop="areaArr">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="ruleForm.areaArr"
                  :options="options"
                  :props="{ expandTrigger: 'hover' }"
                  style="width: 100%"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="获取经纬度" prop="lat">
                <el-row>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-input
                      v-model="ruleForm.lng"
                      :disabled="true"
                    ></el-input>
                  </el-col>
                  <el-col
                    :xs="1"
                    :sm="1"
                    :md="1"
                    :lg="1"
                    :xl="1"
                    style="text-align: center"
                  >
                    --
                  </el-col>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-input
                      v-model="ruleForm.lat"
                      :disabled="true"
                    ></el-input>
                  </el-col>
                  <el-col
                    :xs="1"
                    :sm="1"
                    :md="1"
                    :lg="1"
                    :xl="1"
                    style="text-align: center"
                  >
                    -
                  </el-col>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-button size="medium" type="primary" @click="handleMap">
                      获取经纬度
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="机构简介">
                <el-input
                  v-model="ruleForm.description"
                  :rows="5"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" @click="save">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('ruleForm')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import { isPhone } from "@/utils/validate";
  import addressData from "@/utils/address";
  import { getList } from "@/api/olderData";
  import appMap from "@/components/AppMap/index";
  export default {
    name: "Index",
    components: { appTable, appMap },
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!isPhone(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      };
      return {
        keyword: "",
        areaString: "",
        key: Math.random(),
        key2: Math.random(),
        mapVisible: false,
        dialogVisible: false,
        ruleForm: {},
        rules: {
          name: [{ required: true, message: "请输入名称", trigger: "blur" }],
          person: [{ required: true, message: "请输入法人", trigger: "blur" }],
          cart: [{ required: true, message: "请选择性质", trigger: "change" }],
          type: [{ required: true, message: "请选择类型", trigger: "change" }],
          medical: [
            { required: true, message: "请选择是否医保", trigger: "change" },
          ],
          bed_num: [
            { required: true, message: "请输入床位数", trigger: "blur" },
          ],
          areaArr: [
            { required: true, message: "请选择地址", trigger: "change" },
          ],
          address: [
            { required: true, message: "请输入详细地址", trigger: "blur" },
          ],
          lat: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
          build_time: [
            { required: true, message: "请选择建立时间", trigger: "change" },
          ],
          mobile: [
            { required: true, message: "请输入电话", trigger: "blur" },
            { validator: validatePhone, trigger: "blur" },
          ],
        },
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
        tableColumns: [
          { prop: "name", label: "机构名称" },
          { prop: "person", label: "机构法人" },
          { prop: "mobile", label: "联系方式" },
          { prop: "cart", label: "机构性质", formatter: this.cartFormatter },
          { prop: "type", label: "机构类型", formatter: this.typeFormatter },
          {
            prop: "medical",
            label: "医保资格",
            formatter: this.medicalFormatter,
          },
          { prop: "build_time", label: "成立时间" },
          { prop: "bed_num", label: "床位总数" },
          { prop: "address", label: "详细地址" },
          { prop: "description", label: "简介" },
        ],
        options: [],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.options = addressData;
      this.getTableData();
    },
    methods: {
      cartFormatter(row, column) {
        if (row.cart == 1) {
          return "民办";
        } else if (row.cart == 2) {
          return "公办";
        } else if (row.cart == 3) {
          return "民办公助";
        } else if (row.cart == 4) {
          return "公建民营";
        } else {
          return "";
        }
      },
      typeFormatter(row, column) {
        if (row.type == 1) {
          return "专业机构";
        } else if (row.type == 2) {
          return "医养结合";
        } else if (row.type == 3) {
          return "特色护理";
        } else if (row.type == 4) {
          return "旅居养老";
        } else if (row.type == 5) {
          return "社区照料中心";
        } else if (row.type == 6) {
          return "康养小镇";
        } else if (row.type == 7) {
          return "候鸟养老";
        } else {
          return "";
        }
      },
      medicalFormatter(row, column) {
        if (row.medical == 1) {
          return "是";
        } else if (row.medical == 2) {
          return "否";
        }
      },
      getTableData() {
        let data = this.selectForm;
        data.pid = 1;
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 4);
          }
        });
      },
      save() {
        if (this.ruleForm.areaArr && this.ruleForm.areaArr.length > 0) {
          let area = this.ruleForm.areaArr.join(",");
          this.$set(this.ruleForm, "area", area);
        }
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              getList("put", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancel("ruleForm");
                }
              });
            } else {
              getList("post", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancel("ruleForm");
                }
              });
            }
          }
        });
      },
      handleAdd() {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = {};
      },
      handleCheck() {
        this.key = Math.random();
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          this.dialogVisible = true;
          this.ruleForm = Object.assign({}, this.currentSelectedData[0]);
          if (this.ruleForm.area) {
            let areaArr = this.ruleForm.area.split(",");
            this.$set(this.ruleForm, "areaArr", areaArr);
          }
        }
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.ruleForm = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.ruleForm.id,
              };
              getList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      cancel(formName) {
        this.dialogVisible = false;
        this.ruleForm = {};
        this.$refs[formName].resetFields();
      },
      closeDialog() {
        this.dialogVisible = false;
        this.ruleForm = {};
        this.$refs["ruleForm"].resetFields();
      },
      closeDialogForm() {
        this.dialogVisibleForm = false;
      },
      handleChange(value, form, label) {
        this.$refs.cascaderAddr.$refs.panel.getCheckedNodes()[0].pathLabels;
        let areaString = this.$refs.cascaderAddr.$refs.panel
          .getCheckedNodes()[0]
          .pathLabels.join(",");
        this.areaString = areaString;
      },
      handleMap() {
        if (!this.ruleForm.areaArr || this.ruleForm.areaArr == "") {
          this.$message({
            type: "warning",
            message: "请先选择所在地",
          });
          return false;
        }
        if (!this.ruleForm.address || this.ruleForm.address == "") {
          this.$message({
            type: "warning",
            message: "请先填写详细地址",
          });
          return false;
        }
        this.keyword = this.areaString + this.ruleForm.address;
        this.mapVisible = true;
      },
      result(e) {
        console.log(e);
        this.mapVisible = false;
        this.$set(this.ruleForm, "lng", e.lng);
        this.$set(this.ruleForm, "lat", e.lat);
        // this.$set(this.base, "address", e.address);
        // this.$set(this.formData, "base", this.base);
      },
      closeMap() {
        this.mapVisible = false;
      },
    },
  };
</script>
<style>
  .el-tooltip__popper {
    width: 500px;
  }
</style>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        width: 100%;
        .search-title {
          flex: 0 0 48px;
          width: 48px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
      }
    }
    .form-footer {
      padding-left: 100px;
    }
  }
</style>
